<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<title>用户管理</title>
	</head>
	<body>
		<div id="app">
			<h1 style="text-align: center;">用户管理系统</h1>
			<el-table
				ref="multipleTable"
				:data="student_group"
				tooltip-effect="dark"
				style="width: 100%"
				stripe
				border
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
				prop="id"
				label="编号"
				width="100">
				</el-table-column>
				<el-table-column
				prop="name"
				label="姓名"
				width="100">
				</el-table-column>
				<el-table-column
				prop="sex"
				label="性别"
				width="100">
				</el-table-column>
				<el-table-column lable='操作'>
					<template slot='header' slot-scope='slot'>
						操作&nbsp;&nbsp;
						<el-button size='mini' type='danger' @click='addUser'>新增</el-button>
						<el-button size='mini' type='primary' @click='daleteChoosed'>删除所选</el-button>
					</template>
					<template slot-scope='scope'>
						<el-button
						size='mini'
						type='success'
						@click='handleEdit(scope.$index,scope.row)'>编辑</el-button>
						<el-dialog
						title="编辑"
						:visible.sync="dialogVisible"
						width="30%"
						:before-close="handleClose">
						<a>姓名</a>
						<el-input v-model="input" placeholder="请输入姓名"
						style='width: 150px;' suffix-icon="el-icon-user-solid"></el-input>
						<a>性别</a>
						  <el-select v-model="value" placeholder="请选择">
						    <el-option label="男" value="11"></el-option>
						    <el-option label="女" value="22"></el-option>
						  </el-select>
						  <span slot="footer" class="dialog-footer">
						  <el-button @click="dialogVisible = false">取 消</el-button>
						  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
						  </span>
						  </el-dialog>
						<el-button
						size='mini'
						type='danger'
						@click='handleDelete(scope.$index,scope.row)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		<!-- 	<el-button  type="text" @click="dialogVisible = true">编辑</el-button>
			<el-dialog
			title="编辑"
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="handleClose">
			<a>姓名</a>
			<el-input v-model="input" placeholder="请输入姓名"
			style='width: 150px;' suffix-icon="el-icon-user-solid"></el-input>
			<a>性别</a>
			  <el-select v-model="value" placeholder="请选择">
			    <el-option label="男" value="shanghai"></el-option>
			    <el-option label="女" value="beijing"></el-option>
			  </el-select>
			  <span slot="footer" class="dialog-footer">
			  <el-button @click="dialogVisible = false">取 消</el-button>
			  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
			  </el-dialog> -->
			
			
			
			
		</div>
		<script>
		function Student(id,name,sex){
			this.id=id;
			this.name=name;
			this.sex=sex;
		}
		
		//点击按钮弹窗 显示输入框内容
		new Vue({
			el:'#app',
			data:{
				input:'',
				radio_id:'',
				radio_name:'',
				radio_sex:'',
				sex_group:['男','女'],
				student_group:[{
					id:'1',
					name:'小明',
					sex:'男',
				},{
					id:'2',
					name:'小亮',
					sex:'男',
				},{
					id:'3',
					name:'小光',
					sex:'男',
				}],
				selections:[]
			},
		
			methods:{
				addUser:function(){
					let student=new Student(
						this.input,
						this.radio_id,
						this.radio_name,
						this.radio_sex,
						this.sex_group
					);
					this.student_group.push(student);
				},
				daleteChoosed:function(scope){
					let i=scope.$index;
					this.student_group.splice(i,1);
				},
				handleSelectionChange:function(val){// value==val
					this.selections=val;
					console.log(val);
				}
			},
			
			
			
			
		})
		</script>
	</body>
</html>
